<template>
  <div class="main" :key="HistogramLegend">
    <el-tabs>
      <div class="chartsStyle">
        <div class="chart-title">

          <tr style="height: 30px;">
            <td><span class="nature">Y轴单位</span></td>
            <td> <el-input v-model="yName" @change="setYName"
                           size="mini" style="width: 170px;padding-left: 9px "></el-input></td>
          </tr>
          <br/>

          <tr style="height: 30px;">
            <td><span class="nature">背景颜色</span></td>
            <td>
              <el-color-picker v-model="backgroundColor" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px;">
            <td><span class="nature">柱子颜色</span></td>
            <td>
              <el-color-picker v-model="itemColor" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>

          <tr>
            <td><span class="nature">刻度标签颜色</span></td>
            <td>
              <el-color-picker v-model="labColor" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">柱子粗细</span></td>
            <td>
              <el-input-number v-model="barWidth" @change="setBarWidth" :min="20" :max="90"  size="small" :step="5" style="width: 150px">
              </el-input-number>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">柱子圆角</span></td>
            <td>
              <el-input-number v-model="radius" @change="setRadius" :min="0" :max="100"  size="small" :step="10" style="width: 150px">
              </el-input-number>
            </td>
          </tr>
          <br/>

          <tr>
            <td><span class="nature">刻度表前大小</span></td>
            <td>
              <el-input-number v-model="labSize" @change="setLabSize" :min="10" :max="20"  size="small" style="width: 150px">
              </el-input-number>
            </td>
          </tr>

        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radius: 0,
      backgroundColor: '',
      itemColor: '',
      labColor: '', // 刻度标签颜色
      labSize: '10', // 刻度标签大小
      barWidth: '60', // 柱子宽度
      yName: '单位' // y轴单位
    }
  },
  methods: {
    setRadius (value) {
      this.$store.state.histogramLegend.postRadius = value
      console.log('柱状图圆角大小设置为：' + value)
    },
    setLabSize (val) {
      this.$store.state.histogramLegend.labSize = val
    },
    setBarWidth (val) {
      this.$store.state.histogramLegend.barWidth = val
    },
    setYName (val) {
      this.$store.state.histogramLegend.yName = val
    }
  },
  watch: {
    backgroundColor (val) {
      this.$store.state.histogramLegend.backgroundColor = val
    },
    itemColor (val) {
      this.$store.state.histogramLegend.postColor = val
    },
    labColor (val) {
      this.$store.state.histogramLegend.labColor = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .main{
    background-color: #E6E3E3;
  }
  .nature{
    font-size: 17px;
    font-weight:bold;

  }

</style>
